<!--
 配件渠道
 -->
<template>
<div style="padding: 2% 3%;">
  <el-row>
    <el-button-group>
      <el-button type="info" :size='size' @click="addShow" :disabled="toggleShow">新增</el-button>
      <el-button type="primary" style="float: right;" :size='size' @click="save" >保存</el-button>


    </el-button-group>

      <!-- 修改下拉框 -->
      <template v-if="!toggleShow" >
        <el-select style="margin-left: 1.25rem;" @change="editChange" @clear="clear" :size="size" v-model="value" placeholder="请选择精品名称" clearable>
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.category"
            :value="item.id">
          </el-option>
        </el-select>
      </template>
      <el-button :size="size" icon="el-icon-close" @click="qingkong" v-if="!toggleShow" circle></el-button>

  </el-row>


  <!-- 新增 -->
  <el-row v-if="toggleShow" >
     <el-divider></el-divider>
     <!-- 改成行类表单  :inline="true"  -->

    <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="120px" >
      <el-form-item label="配件渠道" prop="name" >
       <el-select v-model="form.name" placeholder="请选择" style="width: 110%;" @change="findbypeijian" >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

        <!-- 用br换行 或者div  -->
         <br />
        <div style="margin-top: 1.5rem;" >
          <el-form-item label="配件类别" prop="category">
            <el-select v-model="form.category" @change="findbypeijian" placeholder="请选择" style="width: 110%;">
               <el-option
                 v-for="item in options3"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
             </el-select>
          </el-form-item>
        <el-form-item label="加价率">
           <el-input-number :size="size" style="width:100%;" controls-position="right" :precision="2" :step="0.1" :min="0" v-model="form.markup">
           </el-input-number>
        </el-form-item>
        </div>
    </el-form>
    <el-divider></el-divider>

  </el-row>





</div>
</template>

<script>
  export default{
    data() {
      return {
       size:'medium',

       //切换新增修改显示
       toggleShow:true,

       form:{
         name:'',
         category:'',
         markup:0,
       },
       //修改下拉框的值
       options:{
       },
       //修改下拉框选择之后存的值
       value:'',
       rules:{
         name:[{ required: true, message: '请选择配件渠道', trigger: 'blur' }],
         category:[{ required: true, message: '请输入配件类型', trigger: 'blur' }],
       },
       options2:[
          {
            value: '原厂',
            label: '原厂'
          }, {
            value: '非原厂',
            label: '非原厂',
          }
       ],
       options3:[
          {
            value: '油液类',
            label: '油液类'
          }, {
            value: '零件',
            label: '零件',
          }, {
            value: '养护品',
            label: '养护品',
          }, {
            value: '精品',
            label: '精品',
          }, {
            value: '轮胎',
            label: '轮胎',
          }, {
            value: '漆类',
            label: '漆类',
          }, {
            value: '低值易耗品',
            label: '低值易耗品',
          }
       ],
      }
    },
    watch: {
      form: {
        handler(newVal,oldVal){
          console.log(newVal.name)
          this.form.name = newVal.name
           this.form.category =newVal.category
        },
        deep:true
      }
    },
    methods:{
      findbypeijian(){
        this.$ajax.post("AccessoriesChannels/findbyAccessoriesChannels2",{"name":this.form.name,"category":this.form.category}).then(res=>{
          var result = res.data;
          if(result.data.markup!=""){
              this.$set(this.form,"markup",result.data.markup)
              this.$set(this.form,"id",result.data.accessoriesChannels.id)
          }else{
            this.$set(this.form,"markup",0)
          }


        })
      },
      //切换v-if
      addShow(){
        console.log(this.form);
        this.toggleShow=true
         emptyObj(this.form)
         this.value='';
      },
      editShow(){
        this.value='';
        this.toggleShow=false
         emptyObj(this.form)
         this.editOptions();

      },

       //查找修改下拉框的值赋给options
      editOptions(){
        this.$ajax.post("AccessoriesChannels/list",{}).then(res=>{
          var result = res.data;
          if(result.success){
            this.options=result.data
          }
        })
      },

      //保存
      save(){
        this.$refs.form1.validate(valid=>{
          if(valid){
            this.$ajax.post("AccessoriesChannels/save",this.form).then(res=>{
              var result = res.data;
              if(result.success){
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
                emptyObj(this.form)
                this.editOptions();
                this.value='';
              }else{
                this.$notify({
                  title: '提示',
                  message: result.msg,
                  type: 'warning',
                  position: 'bottom-right'
                });
              }
            })

          }
        })
      },

    //选择下拉框
      editChange(){
      this.$ajax.post("AccessoriesChannels/findbyId",{id:this.value}).then(res=>{
          var result = res.data;
          if(result.success){
            this.form=result.data;
            this.$set(this.form,"name",result.data.accessoriesChannels.name);
            this.form.id=result.data.accessoriesChannels.id;
          }
      })
    },
    //点击下拉框×
       qingkong(){
         this.value='';
       }
    }
  }

  function emptyObj(obj){
    if(obj.file){
      console.log(11)
      obj.file=""
    }
    for( var key in obj){
      var o = obj[key];
      if(o instanceof Object){
        emptyObj(o);
      }else{
        obj[key]='';
      }
    }
  }
</script>

<style>
</style>
